<template>
  <div class="h-100 flex flex-column">
    <search-line>
      <div class="section-title">
        {{ nodeData.name ? nodeData.name + ' / ' + title : title }}
      </div>
      <div v-if="nodeData.parentId && nodeData.parentId !== '0'" slot="rightButtons">
        <el-button type="primary" icon="el-icon-plus" @click="showAddBtn">
          新建
        </el-button>
      </div>
    </search-line>
    <div class="flex-1 overflow-scroll">
      <div v-if="nodeData.parentId && nodeData.parentId !== '0'">
        <x-table v-bind="tableOption" :has-pagination="false" @clickBtn="tableBtnClick" />
      </div>
      <div v-else class="w-100 h-100">
        <no-data text="一级菜单没有按钮" />
      </div>
    </div>
    <x-dialog :visible.sync="dialogVisible" title="新增按钮" @close="menuDialogClose" @submit="menuSubmit">
      <dialog-form ref="menuForm" :menu-form="menuForm" :parent-name="parentName" :is-button="true" />
    </x-dialog>
  </div>
</template>
<script>
import dialogForm from './form'
import noData from '@/components/noData'
import * as api from '../../../api/user'

export default {
  components: { dialogForm, noData },
  data() {
    return {
      tableOption: {
        data: [],
        columns: [
          {
            label: '按钮名称',
            prop: 'name'
          },
          {
            label: '资源编码',
            prop: 'resource'
          }
        ],
        operating: [
          {
            label: '删除',
            name: 'del',
            type: 'danger'
          }
        ]
      },
      menuForm: {},
      parentName: '',
      dialogVisible: false,
      title: '按钮配置',
      permissionId: '',
      nodeData: {}
    }
  },
  created() {},
  methods: {
    changeNode(data) {
      this.nodeData = data
      this.parentName = data.name
      console.log('-------', 'data', data)

      if (data.parentId !== '0' && data.permissionId !== '0') {
        this.getList()
      } else {
        this.tableOption.data = []
      }
    },
    getList() {
      api.getMenuById({ permissionId: this.nodeData.permissionId }).then(res => {
        this.tableOption.data = res
      })
    },
    tableBtnClick(row, btn) {
      if (btn.name === 'del') {
        this.$confirm('确认删除该条数据？删除后不可恢复')
          .then((_) => {
            api.delMenu({ permissionId: row.permissionId }).then((res) => {
              this.$message.success('操作成功')
              this.getList()
            })
          })
          .catch((e) => {})
      }
    },
    showAddBtn() {
      this.dialogVisible = true
    },
    menuDialogClose() {
      this.menuForm = {}
    },
    menuSubmit() {
      this.$refs.menuForm.$refs.menuForm.validate((valid) => {
        if (valid) {
          this.menuForm.parentId = this.nodeData.permissionId
          this.menuForm.level = 0
          this.menuForm.type = 1

          api.addMenu(this.menuForm).then((res) => {
            this.$message.success('操作成功')
            this.dialogVisible = false
            this.getList()
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title-name {
  line-height: 32px;
  color: #000;
}

.nodata-box {
  width: 100%;
}
</style>
